<template>
  <div class="search-item-one">
    <!-- <el-input v-if="'text' === item.type" class="form-input" :name="item.name" :class="item.name" :placeholder="item.text" :style="item.style" icon="circle-cross" v-model="item.value" :on-icon-click="handleIconClick"></el-input> -->
    <el-input
      v-if="'text' === item.type"
      class="form-input"
      :name="item.name"
      :class="item.name"
      :placeholder="item.text"
      :style="item.style"
      v-model="item.value"
    >
      <i slot="suffix" class="el-input__icon el-icon-error" @click="handleIconClick"></i>
    </el-input>
    <template v-if="'datePicker' === item.type && item.isSingle == true">
      <el-date-picker
        v-model="item.value"
        :type="item.flag"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :picker-options="item.pickerOptions"
        :editable="false"
      ></el-date-picker>
    </template>
    <template v-else-if="'datePicker' === item.type">
      <el-date-picker
        v-if="'daterange' == item.pickerType && !item.pickerOptions"
        key="daterange"
        type="daterange"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
        :picker-options="beforePickerOptions"
        :editable="false"
        unlink-panels
      ></el-date-picker>
      <el-date-picker
        v-else-if="'daterange' == item.pickerType && item.pickerOptions"
        key="daterange"
        type="daterange"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
        :picker-options="item.pickerOptions"
        :editable="false"
        unlink-panels
      ></el-date-picker>
      <el-date-picker
        v-else-if="'month' == item.pickerType"
        key="month"
        type="month"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
      ></el-date-picker>
      <el-date-picker
        v-else-if="'year' == item.pickerType"
        key="year"
        type="year"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
      ></el-date-picker>
      <el-date-picker
        v-else
        key="datetimerange"
        type="datetimerange"
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
        :picker-options="beforePickerOptions"
        :default-time="['00:00:00', '23:59:59']"
        unlink-panels
      ></el-date-picker>
    </template>
    <template v-if="'timePicker' === item.type">
      <el-time-picker
        is-range
        class="form-input"
        :name="item.name"
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :propName="item.propName"
        v-model="item.value"
      ></el-time-picker>
    </template>
    <el-select
      v-if="'select' === item.type"
      class="form-input"
      :filterable="item.filterable"
      :name="item.name"
      :class="item.name"
      :placeholder="item.text"
      :style="item.style"
      v-model="item.value"
      @change="handleChange(item)"
    >
      <el-option v-for="(it, idx) in item.options" :key="idx" :label="it.name" :value="it.value"></el-option>
    </el-select>
    <div class="double-input-box" v-if="'doubleInput' === item.type">
      <el-input
        class="form-input"
        :name="item.names[0]"
        :class="item.names[0]"
        placeholder="≤"
        :style="item.style"
        v-model="item.values[0]"
      ></el-input>
      <span class="seprate-span">{{item.seperator ? item.seperator : '-'}}</span>
      <el-input
        class="form-input"
        :name="item.names[1]"
        :class="item.names[1]"
        placeholder="≤"
        :style="item.style"
        v-model="item.values[1]"
      ></el-input>
    </div>

    <el-input v-if="'mixedInput'===item.type" placeholder="请输入内容" v-model="item.inputVal">
      <el-select
        class="form-input readCarNo"
        slot="prepend"
        :placeholder="item.text"
        :name="item.name"
        :class="item.name"
        :style="item.style"
        v-model="item.value"
        @change="handleChange(item)"
      >
        <el-option v-for="(it, idx) in item.options" :key="idx" :label="it.name" :value="it.value"></el-option>
      </el-select>
      <el-button slot="append" v-if="item.value==item.btnFlag" @click.prevent="readCarCode(item)">读卡</el-button>
    </el-input>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import { formatTen } from "../../assets/js/help.js";
export default {
  mixins: [common],
  props: {
    dataObj: Object
  },
  data() {
    return {
      item: this.dataObj
    };
  },
  methods: {
    readCarCode(item) {
      let params = {
        block_no: 16
      };
      API.fetchGet("http://127.0.0.1:666/api/v1/card/block", params).then(
        res => {
          if (res.error_code == 0) {
            //读卡成功
            let data = res.data;
            API.fetchGet("/commonFun/card/decode.do", {
              ciphertext: data.data
            }).then(
              res => {
                if (res.status == 1) {
                  item.inputVal = res.data;
                }
              },
              err => {}
            );
          } else {
            switch (res.error_code) {
              case -1:
                this.showToast("请先连接好读卡器", 0, 2000);
                break;
              case -2:
                this.showToast(
                  "请先把卡放在读卡器上,然后点击[读卡]按钮读卡",
                  0,
                  2000
                );
                break;
              case -4:
                this.showToast("无法读取卡信息", 0, 2000);
                break;
            }
          }
        },
        err => {}
      );
    },
    handleIconClick() {
      this.item.value = "";
    },
    handleChange(Item) {
      let isHandleChange = Item.isHandleChange;
      if (isHandleChange) {
        this.$emit("handleChange", Item);
      }
    }
  }
};
</script>

<style lang="less">
@import "../../assets/less/base/variables.less";
@import "../../assets/less/mixins/border-radius.less";
.el-select {
  .el-input {
    .el-select__caret {
      color: #555;
    }
  }
}

.form-group .double-input-box {
  border: 1px solid @greydd;
  font-size: 14px;
  .border-right-radius(4px);
  &:hover {
    border-color: @green;
  }
  .seprate-span {
    display: inline-block;
    width: 16px;
    height: 28px;
    line-height: 28px;
    color: @lightBlack;
    text-align: center;
    vertical-align: top;
  }
  .form-input {
    min-width: 60px;
    &:first-child {
      .el-input__inner {
        .border-right-radius(0px);
        border-right: 1px solid @greydd;
        &:focus {
          border-color: @green;
        }
      }
    }
    &:last-child {
      .el-input__inner {
        .border-left-radius(0px);
        border-left: 1px solid @greydd;
        &:focus {
          border-color: @green;
        }
      }
    }
  }
  .el-input__inner {
    border: 0;
    height: 28px;
    line-height: 28px;
    &:focus {
      border-color: @green;
    }
  }
}

.search-item-one {
  .el-input__inner {
    + .el-input__suffix {
      opacity: 0;
    }

    &:hover,
    &:focus {
      + .el-input__suffix {
        opacity: 1;
      }
    }
  }
  .readCarNo {
    .el-input__inner {
      + .el-input__suffix {
        opacity: 1;
      }
    }
  }
}

.el-input-group__prepend {
  overflow: hidden;
  > div {
    &.el-select {
      .el-input__inner {
        color: #555;
      }
      &:hover {
        color: #555;
      }
    }
  }
}
.el-input-group__append {
  > button {
    &.el-button {
      color: #555;
    }
  }
}
</style>
